<template>
<div  style="background-color: white" >
    <div class="my-heading">
            <div class="search-box " >
                <input v-model="searchValue" class="search-input" placeholder="    请输入关键词" id="search"></input>
                <img class="" :src='search_jpeg'/>
               　<label class="search-filter"> 
                   <span style="width: 8em" >
                        筛选
                   </span>
                   <select style="width: 4em; height: 2em;" v-model="protectorFilter_areaid" >
                       地区
                       <option value=""> 地区</option>
                       <option v-for="(v, k)  in areas" :value="k"> {{ v.name }} </option>
                   </select>
                   <select style="width: 4em; height: 2em;" v-model="protectorFilter_status" >
                       <option value="">状态</option>
                       <option value="b">布防</option>
                       <option value="c">撤防</option>
                   </select>
                </label>
            </div>
            <ul class="color-info">
                <li>
                    <label class="badge" :style="{ 'background-color': chefang_graded_colors[2], width: 20 +'px', height: 20 + 'px', 'border-radius':10 +'px' }"></label>
                    <br/>
                    <label>撤防８h+</label>
                </li>
                <li>
                    <label class="badge" :style="{ 'background-color': chefang_graded_colors[1], width: 20 +'px', height: 20 + 'px', 'border-radius':10 +'px' }"></label>
                    <br/>
                    <label>撤防４h</label>
                </li>
                <li>
                    <label class="badge" :style="{ 'background-color': chefang_graded_colors[0], width: 20 +'px', height: 20 + 'px', 'border-radius':10 +'px' }"></label>
                    <br/>
                    <label>撤防0-4h</label>
                </li>
                <li>
                    <label class="badge" :style="{ 'background-color': bufang_graded_colors[2], width: 20 +'px', height: 20 + 'px', 'border-radius':10 +'px' }"></label>
                    <br/>
                    <label>布防8h+</label>
                </li>
                <li >
                    <label class="badge" :style="{ 'background-color': bufang_graded_colors[1], width: 20 +'px', height: 20 + 'px', 'border-radius':10+'px' }"></label>
                    <br/>
                    <label>布防4h+</label>
                </li>
                <li >
                    <label class="badge" :style="{ 'background-color': bufang_graded_colors[0], width: 20 +'px', height: 20 + 'px', 'border-radius':10 +'px' }"></label>
                    <br/>
                    <label>布防0-4h</label>
                </li>
            </ul>
            <div class="padding" >
            </div>
    </div>

    <div class='my-body'> 
        <div class="flex-container" >
            <div v-if="protectors[shop.mac].status != 'pending'" class="flex-item shop-panel"  v-for="(shop, shopid) in filteredShops" :key="shopid">
                <div class='shop-info'>
                    <ul  v-if="showSetting[shopid]" class="left" >
                        <li class="" @click=  "SetProtector( shop.mac, 'bufang')"  >
                           <button>布防</button>
                        </li>
                        <li class="" @click = "SetProtector( shop.mac, 'chefang')" >
                           <button>一键撤防所有防区</button>
                        </li>
                    </ul>
                    <div  v-else class="left" @click="GotoSecurity( shopid )" >
                        <span>{{shopid}}</span> 
                        <span>{{shop.name}}</span>
                    </div>
                    <div class="right " @click.stop.prevent="onClickShowSetting( shopid )">
                        <button> {{ showSetting[shopid] ?  "取消":"设置" }}</button>
                    </div>
                </div>
                <div  class="shop-armareas" >
                    <div class="arm-area" v-for="(area, num ) in protectors[shop.mac].arm_areas" @click="ShowArmArea( shop.id, num )" :class="{ [RefineArmAreaStatusColor( area , num)]: true }" >
                        <label> <input type= "checkbox" style="transform:scale(1.5)" v-if="showSetting[shopid]" v-model="areaChecked[shop.mac][num]" />  {{ num }}  </label>
                    </div>
                </div>
            </div>
            <div v-else class="flex-item shop-panel" >
                <div style="position:relative; top:50%; transform: translateY( -50% ); margin:auto; width: 200px; " >
                <svg class="spinner" width="100px" height="100px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                    <circle class="path" fill="transparent" stroke-width="2" cx="33" cy="33" r="30" stroke="url(#gradient)"/>
                        <linearGradient id="gradient">
                            <stop offset="50%" stop-color="#42d179" stop-opacity="1"/>
                            <stop offset="65%" stop-color="#42d179" stop-opacity=".5"/>
                            <stop offset="100%" stop-color="#42d179" stop-opacity="0"/>
                        </linearGradient>
                    </circle>
                    <svg class="spinner-dot dot" width="5px" height="5px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg" x="37" y="1.5">
                        <circle class="path" fill="#42d179" cx="33" cy="33" r="30"/>
                        </circle>
                    </svg>
                </svg> 
                    <h2>
                        等待操作完成 ...
                    </h2>
               </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>

import axios from 'axios'
import bus from './bus'
export default { 
    name: 'protectors',
    data(){ 
        console.log( "-------------------------------------  dget  data ----------------")
        return {
            searchValue:"",
            currentShopMac: "",
            showSetting:{},
            areaChecked: {},
            protectorFilter_areaid: "",
            protectorFilter_status: "" 
        }
    },
    computed: { 
        bufang_graded_colors(){
            return window.bufang_graded_colors
        },

        chefang_graded_colors(){
            return window.chefang_graded_colors
        },

        shops() { 
            console.log( "shops:  ", this.$store.state.shops )
            return this.$store.state.shops;
        },

        protectors(){
            console.log( "update protectors: ", this.$store.state.protectors)
            return this.$store.state.protectors
        },

        filterProtectors(){
        },

        areas(){ 
            return this.$store.state.areas;
        },

        search_jpeg(){
            return require( './assets/search.jpeg')
        },

        filteredShops(){

            var filted = {};
            console.log( "filter status: ", this.protectorFilter_status );

            for( let id in this.shops){
                let shop = this.shops[id];
                let protector = this.protectors[shop.mac];

                if( protector.status == 'a' || protector.status == 'b'){
                    status = 'b';
                }
                else{
                    status ='c'
                }

                var ok = true;
                if( this.protectorFilter_areaid && shop.areaid != this.protectorFilter_areaid ){
                    ok = false;
                }

                if( this.protectorFilter_status &&  status != this.protectorFilter_status){
                    ok = false;
                }

                if( ok ){
                    filted[id] = shop;
                }
            }

            if( !this.searchValue )
                return filted;
            else { 
                var x_filted = { };
                for( let shopid in filted ) { 
                    if( filted[shopid].name.match( this.searchValue ) ){
                        x_filted[shopid] = this.shops[shopid];
                    }
                }
                return x_filted;
            }
        }
    },
    created(){ 
        for( let mac in  this.protectors ){
            console.log( mac );
            this.areaChecked[mac] = { };
        }
        console.log( "areaChecked");
        console.log( this.areaChecked );
    },

    methods:{
        SetProtector( mac, op ){
            console.log('set protector .... ', mac, op);
            if( op == "chefang"){
                this.$store.commit( 'cancelProtector', { mac });
            }
            else if ( op == "bufang" ) {
                this.$store.commit('setProtector', { mac, arm_areas: this.areaChecked[mac] } );
            }
            else {
                console.log( "!!!!  error , unexpected !!!!!");
            }
        },

        ShowArmArea( shopid, arm_area_idx ){
            bus.$emit( "ShowArmArea", { shopid, arm_area_idx, stamp: 0  }  )
        },

        GotoSecurity( shopid ) { 
            this.$router.push( "/security/" + shopid  )
        },

        onClickShowSetting( shopid ){
            this.$set( this.showSetting, shopid,!this.showSetting[shopid] );
            var checked = {};
            for( let i in this.shops[shopid].arm_areas){
                let area_status = this.protectors[this.shops[shopid].mac].arm_areas[i].s 
                if( area_status == 'b' || area_status == 'a' ) {
                    checked[i] = true;
                }
                else 
                    checked[i] = false;
            }
            console.log( "checked: ", checked );
            this.$set( this.areaChecked, this.shops[shopid].mac, checked );
        },

        RefineArmAreaStatusColor( area, num  ){
            console.log( area.s  , num );
            if( area.a - Date.now() < (120 * 1000) ){
                return "alarm_color";
            }
            else if( area.s =="b" ) {
                var off = ( area.t - Date.now())/( 3600  * 4 )
                off = Number( off )
                if( off > 2 )
                    off = 2
                if( off < 0 )
                    off = 0
                return "bufang_color_" + off;
            }
            else if( area.s == "c"){
                var off = ( area.t - Date.now())/( 3600  * 4 )
                off = Number( off )
                if( off > 2 )
                    off = 2
                if( off < 0 )
                    off = 0
                return "chefang_color_" + off;
            }
            else if( area.s == 'a'){
                return "alarm_color";
            }
            else {
                return 'chefang_color_' + 2;
            }
        }
    }
}

</script>

<style scoped>
*{
    margin: 0px;
    padding: 0px;
}
@keyframes alarm{ 
from { background-color: red }
to { background-color: white}
}
button{
    border-radius: 15%;
    background-color: #884422;
    color: white;
}

.alarm_color{ 
    animation: 1.5s alarm infinite;
}
.bufang_color_0{
    background-color: #95C9FA
}

.bufang_color_1{
    background-color: #3189D6,
}

.bufang_color_2{
    background-color: #00498D
}

.chefang_color_0{
    background-color: #FFDCB4
}

.chefang_color_1 {
    background-color: #FF9335;
}

.chefang_color_2 {
    background-color: #FF572B;
}

.list{
  width: 316px;
  list-style-type: none;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 18px;
  background-color: #f1f1f1;
  position: relative;
  left: 4px;
  border-bottom: 1px solid grey;
}
.list:hover{
  background-color: rgb(75,137,220);
}
.my-heading{ 
    width: 100%;
    height: 100px;
}
.my-heading .padding{
    clear: both;
}
.search-box{
    float: left;
    margin-top:27px;
    margin-left: 100px;
}
.search-box .search-filter{
    padding-top: 6px;
    margin-left: 20px;
    vertical-align: bottom;
    line-height: 100%;
    font-size: 20px;
}
.search-box .search-input{ 
    font-size: 1.2em;
}
.color-info{
    float: right;
    margin-top: 27px;
    margin-left:0px;
}
#search{
    height: 50px;
    display: inline-block;
    width: 316px;
    position: relative;
    left: 4px;
    top: 1px;
    border-radius: 4px 0px 0px 4px;
}
ul.toggle{ 
    background-color: #444;
    right: 10px;
    bottom : 1px;
    display: block;
    font-size: 20px;
    z-index: 2000;
}
ul.toggle > li{
    display: block;
    width: 80px;
}

ul.color-info>li{
    display: inline-block;
    width: 100px;
    height: 80px;
    text-align: center;
}
.my-body{
    min-height: 1000px;
    background-color: #f5f5f5
}
ul.color-info>li>label{
    display: inline-block;
    height: 30px;
    text-align: center;
}
.flex-container{ 
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content:flex-start; 
}

.flex-item{ 
    position: relative;
    width: 30em;
    height: 260px;
    margin: 10px;
    background-color: white;
    border-radius: 8px;
}

.shop-info{
    background-color: #337ab7;
    width: 100%;
    height: 45px;
    color: white;
    font-size: 24px;
    border-radius: 8px 8px 0px 0px;
    padding: 5px 5px;
}
.shop-info .left{ 
    float: left;
    overflow-y : hidden;
}

.shop-info .right{
    float: right;
}
.shop-info .left:hover{ 
    text-decoration: underline;
    cursor:pointer;
}
.shop-info .left li { 
    display: inline-block;
}
.shop-armareas{ 
    display: flex;
    padding: 11px;
    width: 100%;
    min-height: 200px;

    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content:center; 
    overflow-y: hidden;
    background-color: #bbb;
    
}

label{
    height: 45px;
    line-height: 45px;
    text-align: center;
}

.pop-hint{
    position: absolute;
    bottom: 10px;
    left: 170px;
}
.arm-area{ 
    width: 74px;
    height: 30px;
    border-bottom-left-radius: 15px;
    border-top-right-radius: 15px;
    border-top-right-radius: 15px;
    margin: 5px;
    font-size: 20px;
    text-align: center;
    display:inline-block;
}
.arm-area label{
    display:inline-block;
    vertical-align: middle;
    height: 30px;
    line-height: 30px;
}
.arm-area:before{
    content:'';
    height: 100%;
    display:inline-block;
    vertical-align: middle;
}
.arm-area::before{
    content: "";
    display: inline-block;
    line-height: 100%;
}
.spinner {
  animation: rotate 1.4s linear infinite;
  -webkit-animation: rotate 1.4s linear infinite;
  -moz-animation: rotate 1.4s linear infinite;
  width:174px;
  height:174px;
  position: relative;
}

.spinner-dot {
  width:274px;
  height:274px;
  position: relative;
  top: 0;
}


@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rotate {
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

.path {
  stroke-dasharray: 170;
  stroke-dashoffset: 20;
}
</style>